<template>
	<view>
		<u-navbar
			title="结算"
			leftIconColor="#fff"
			:autoBack="true"
			:titleStyle="titleStyle"
			placeholder
			bgColor="transparent"
		></u-navbar>
		<view class="content">
			<view class="box">
				<view class="box_title">
					<image src="/static/image/merchant_23.png"></image>
					<view class="text">商家收款</view>
				</view>
				<u--text text="微信扫一扫" color="#000" size="16px" margin="25px 0px" align="center" />
				<image class="code" :src="code_url_image"></image>
				<u--text
					:text="'￥' + price"
					color="#fc4a31"
					size="36px"
					bold
					margin="20px 0px 60px"
					align="center"
				/>
				<view class="grid_2" @click="goPath">
					<view class="grid_left">
						<image src="/static/image/merchant_24.png"></image>
						<view class="text">收款明细</view>
					</view>
					<u-icon name="arrow-right" color="#c4c4c4" size="20"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			titleStyle: {
				color: '#fff'
			},
			order_id: 0,
			order_type: '',
			type: '',
			access_token: '',
			method: '',
			code: '',
			price: 0,
			code_url_image: '',
			status: ''
		};
	},
	onLoad(event) {
	console.log(event);
		this.order_id = event.order_id;
		this.order_type = event.order_type;
		this.type = event.type;
		this.access_token = event.access_token;
		this.method = event.method;
		this.code = event.code;
		this.status = event.status;
		this.getCode();
	},
	methods: {
		getCode() {
			this.$http
				.post('wanlshop/pay/payment', {
					order_id: this.order_id,
					order_type: this.order_type,
					type: this.type,
					access_token: this.access_token,
					method: this.method,
					code: this.code,
					status: this.status
				})
				.then(res => {
					if (res.code == 1) {
						this.code_url_image = res.data.code_url_image;
						this.price = res.data.amount;
					}
				});
		},
		goPath() {
			uni.$u.route({
				url: 'pagesA/my/proceeds'
			});
		}
	}
};
</script>
<style>
page {
	background: linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%);
}
</style>
<style lang="scss" scoped>
.content {
	padding: 30rpx 20rpx;

	.box {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.code {
		width: 400rpx;
		height: 400rpx;
		display: block;
		margin: 0 auto;
	}

	.box_title {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.text {
			font-size: 36rpx;
			font-weight: 500;
			color: #000;
			line-height: 40rpx;
		}
	}

	.grid_2 {
		display: grid;
		grid-template-columns: auto 20px;
		grid-column-gap: 20rpx;
		align-items: center;
		padding: 20rpx 0rpx;
		border-top: 2rpx solid #ededed;
	}

	.grid_left {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.text {
			font-size: 36rpx;
			font-weight: 500;
			color: #000;
			line-height: 40rpx;
		}
	}
}
</style>
